<template>
    <div class="cityConsume">
        <el-drawer :visible.sync="isShow" direction="rtl" size="80%" destroy-on-close>
            <template v-slot:title>
                <div class="title">
                    <p>账户日志</p>
                </div>
            </template>
            <div class="line"></div>
            <cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
                <el-row style="height: 93%" type="flex">
                    <cl-flex1 style="overflow: hidden;">
                        <cl-pagefull @resize="onResize">
                            <template #head>
                                <el-row type="flex">
                                    <div>
                                        <cl-filter-group v-model="search" class="pr-1">
                                            <cl-filter label="账户ID">
                                                <el-input v-model="search.advertiser_id" placeholder="请输入账户名称 / ID"
                                                    clearable style="width: 170px" />
                                            </cl-filter>
                                            <cl-filter label="请选择媒体平台">
                                                <cl-select v-model="search.type" placeholder="全部" clearable filterable>
                                                    <el-option v-for="item in platformList" :key="item.plat_id"
                                                        :label="item.name" :value="item.plat_as" />
                                                </cl-select>
                                            </cl-filter>
                                            <cl-filter label="请选择任务类型">
                                                <cl-select v-model="search.crontab_type" placeholder="全部" clearable
                                                    filterable>
                                                    <el-option v-for="item in crontabList" :key="item.id"
                                                        :label="item.desc" :value="item.id" style="width: 230px"/>
                                                </cl-select>
                                            </cl-filter>
                                            <cl-filter label="时间">
                                                <el-date-picker v-model="search.begin_time" type="date"
                                                    value-format="yyyy-MM-dd" style="width: 230px" :clearable="false"
                                                    :picker-options="pickerOptions" />
                                            </cl-filter>
                                            <!-- <cl-flex1 /> -->
                                        </cl-filter-group>
                                    </div>
                                </el-row>
                            </template>
                            <div style="height: 100%">
                                <cl-table v-bind="table">
                                    <cl-empty slot="empty" />
                                    <template #column-info="{scope: { row }}">
                                        <div>{{row.crontab_desc}}</div>
                                        <div>ID:{{row.advertiser_id}}</div>
                                    </template>
                                </cl-table>
                            </div>
                            <template #foot>
                                <el-row type="flex">
                                    <cl-flex1 />
                                    <zm-pagination />
                                </el-row>
                            </template>
                        </cl-pagefull>
                    </cl-flex1>
                </el-row>
            </cl-crud>
            <div class="btnBox">
                <button @click="isShow = false">关闭</button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import dayjs from "dayjs";
import axios from 'axios'
export default {
    name: "AccountJournal",
    data() {
        return {
            isShow: false,
            biz_id:'',
            platformList:[],
            search: {
                advertiser_id: '',
                type: '',
                crontab_type:"",
                begin_time: dayjs().format("YYYY-MM-DD")
            },
            pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				}
			},
            table: {
                "context-menu": ["refresh"],
                columns: [
                    { label: "媒体平台", prop: "adv_name",width:150 },
                    { label: "账户信息", prop: "info",width:200 },
                    { label: "时间", prop: "create_time",width:120 },
                    { label: "任务类型", prop: "crontab_desc",width:200 },
                    { label: "响应内容", prop: "response",minWidth:200 }
                ],
                props: {
                    maxHeight: 500
                }
            },
            crontabList:[]
        };
    },
    mounted(){
        //this.getmediaPlatformInfo(this.biz_id)
    },
    methods: {
        onLoad({ ctx, app }) {
            ctx.service(this.$service.config)
                .set("dict", {
                    api: {
                        page: "consumptionJournal"
                    }
                })
                .done();
            app.refresh(this.search);
        },
        async onRefresh(params, { next, done, render }) {
            let { list } = await next({
                ...params
            });
            render(list);
        },
        async open(platformList) {
            this.platformList=platformList
            let {data}=await axios.get('https://adxh.xmzmmr.com/Auth/crontabType')
            console.log(data);
            this.crontabList=data.result.data
            this.isShow = true
        },
        close() {
            this.isShow = false;
        },
        onResize(h) {
            this.table.props.maxHeight = h;
        }
    }
};
</script>
<style lang="scss" scoped>
.cityConsume {
    text-align: center;

    .line {
        position: absolute;
        top: 60px;
        width: 100%;
        border-top: 1px solid #e5e6eb;
    }
}

.title {
    color: #333;
}

.btnBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 80%;
    min-height:6%;
    border-top: 1px solid #e5e6eb;
    background-color: #fff;
    
    button {
        color: #4e5969;
        position: absolute;
        bottom: 20%;
        right: 1%;
        padding: 5px 12px;
        border: 1px solid #e5e6eb;
        cursor: pointer;
    }

    // #e5e6eb
}
</style>